#loading1{
    width: 100px;
height: 100px;
        top: 50%;
        left: 50%;
transform: translate(-50%, -50%);
position: fixed;
    }
    .demo1{
        width:10px;
        height: 10px;
        border-radius: 50%;
        background-color: #66b1ff;
        position: absolute;
        animation: de 800ms ease infinite;
    }
    @keyframes de {
        0%,100%{
            transform: scale(1);
        }
        30%{
            transform: scale(1.5);
        }
    }
    .demo1:nth-child(1){
        left: 50%;
        top: 10px;
        animation-delay: 0ms;
    }
    .demo1:nth-child(2){
        top: 25%;
        left:75%;
        animation-delay: 100ms;
    }
    .demo1:nth-child(3){
        top: 50%;
        right: 0;
        animation-delay: 200ms;

    }
    .demo1:nth-child(4){
        top:75%;
        left:75%;
        animation-delay: 300ms;
    }
    .demo1:nth-child(5){
        bottom: 0px;
        left: 50%;
        animation-delay: 400ms;
    }
    .demo1:nth-child(6){
        top:75%;
        left: 25%;
        animation-delay: 500ms;
    }
    .demo1:nth-child(7){
        left: 10px;
        top: 50%;
        animation-delay: 600ms;
    }
    .demo1:nth-child(8){
        top: 25%;
        left: 25%;
        animation-delay: 700ms;
    }